import React, { Component } from 'react'
import './Header.css'
export default class Header extends Component {
  state = {
    value: '',
  }
  // 这是监听用户按下键盘按键的事件
  handle = (e) => {
    // 要判断按下的是否是回车
    // e.keyCode在标准中已经废弃,但是所有浏览器依然支持,所以可以继续用
    // e.key 是新标准中推荐使用的属性

    // 如果不是回车,就return
    // 如果文本框中没有值就return
    if (e.key !== 'Enter' || !this.state.value) return

    // 将用户输入到文本框的内容传递给App组件
    // 1. 拿到用户输入
    // 2. 想办法传过去
    this.props.add(this.state.value)

    // 清空文本框
    this.setState({
      value: '',
    })
  }
  render() {
    return (
      <div className="todo-header">
        {/* 添加功能的需求: 当用户户输入完毕之后,按下回车键,则将输入的内容添加到任务列表当中(就要把数据添加到App组件的list数组中) */}
        <input
          type="text"
          value={this.state.value}
          onKeyDown={this.handle}
          onChange={(e) => {
            this.setState({
              value: e.target.value.trim(),
            })
          }}
        />
      </div>
    )
  }
}
